import React ,{useState,useEffect}from 'react'
import {Outlet,NavLink} from "react-router-dom"
import { Layout, Menu, Breadcrumb } from 'antd';
import {mainRouter} from "../router/routerConfig"
const { Header, Content, Footer, Sider } = Layout;


function Index() { 
    const [items,setItems] = useState([])
    const [collapsed,setcollapsed] = useState(false)
    useEffect(()=>{
        setItem()
    },[])
    const getItem = (label, key, icon, path)=> {
        const nav =  <NavLink to={path}>{label}</NavLink>
        return {
          key,
          icon,
          label:nav,
        };
    }
    const setItem = ()=>{
        let data = []
        mainRouter.forEach(item=>{
            data.push(getItem(item.title,item.key,item.icon,item.path))
        })
        setItems(data)
    }
    const onCollapse = (collapsed) => {
        setcollapsed(collapsed)
    };
    return (
        <div>
             <Layout
                style={{
                minHeight: '100vh',
                }}
            >
                <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
                    <div className="logo" />
                    <Menu
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        mode="inline"
                        theme="dark"
                        inlineCollapsed={collapsed}
                        items={items}
                    />
                </Sider>
                <Layout className="site-layout">
                <Header
                    className="site-layout-background"
                    style={{
                    padding: 0,
                    }}
                />
                <Content
                    style={{
                    margin: '0 16px',
                    }}
                >
                    <Breadcrumb
                    style={{
                        margin: '16px 0',
                    }}
                    >
                    
                    </Breadcrumb>
                    <div
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            minHeight: 360,
                            width:"100%",
                            height:"100%",
                        }}
                        >
                        <Outlet/>
                    </div>
                </Content>
                <Footer
                    style={{
                    textAlign: 'center',
                    }}
                >
                    Ant Design ©2018 Created by Ant UED
                </Footer>
                </Layout>
            </Layout>
        </div>
    )
}

export default Index
